<template>
  <div>
    <!-- 上面的牙位信息等内容 -->
    <OrderInfo
      :dataObj="dataObj"
      :isExamine="isExamine"
      :imgUrl="imgUrl"
      @toExport="toExport"
      :showExport="true"
    >
    </OrderInfo>

    <!-- 截图组件 -->
    <Screenshot :mouthImgs="mouthImgs"></Screenshot>
    <!-- pdf导出确认弹框 -->
    <!--  -->
    <el-dialog
      :title="$t('caseorder.yulan.yulan127')"
      :visible.sync="showPdf"
      width="60%"
      :close-on-click-modal="false"
    >
      <div ref="pdf" class="pdf_box" :style="{ height: loading ? 'auto' : '' }">
        <detailPdf
          :dataObj="dataObj"
          :imgUrl="imgUrl"
          :mouthImgs="mouthImgs"
          :loading="loading"
        ></detailPdf>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showPdf = false">{{ $t('caseorder.anli36') }}</el-button>
        <el-button type="primary" @click="handleExport" :loading="loading">{{
          $t('caseorder.anli70')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OrderInfo from '@/views/order/common/OrderInfo';
import Screenshot from '@/views/order/common/Screenshot';
import basicInfo from '@/views/order/common/basicInfo';
import detailPdf from '@/views/order/common/detailPdf';
import { downloadPDFA4, downloadPDF } from '@/utils/pdf.js';
export default {
  // 订单详情
  name: 'BLZMasterDetail',

  components: {
    OrderInfo,
    Screenshot,
    basicInfo,
    detailPdf,
  },

  data() {
    return {
      tableData: [],
      dataObj: {},
      mouthImgs: [],
      imgUrl: '',
      isExamine: '',
      // 控制导出pdf弹框的显示与隐藏
      showPdf: false,
      notes: '',
      loading: false,
    };
  },

  mounted() {
    this.isExamine = this.$route.query.isExamine;
  },

  methods: {
    toExport() {
      this.showPdf = true;
    },
    handleExport() {
      this.loading = true;
      document.body.style.pointerEvents = 'none';
      this.$nextTick(() => {
        downloadPDFA4(this.$refs.pdf, this.dataObj, this.$t('caseorder.anli121'), true, () => {
          this.loading = false;
          this.$message.success(this.$t('caseorder.anli71'));
          this.showPdf = false;
          document.body.style.pointerEvents = 'all';
        });
      });
    },
    // 解决图片跨域
    getBase64Image(url, callback) {
      var image = new Image();
      image.src = url + '?v=' + Math.random(); // 处理缓存
      image.crossOrigin = '*'; // 支持跨域图片
      image.onload = () => {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0, image.width, image.height);
        const ndata = canvas.toDataURL('image/jpeg', 1.0);
        callback ? callback(ndata) : null;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 5vh !important;
}

::v-deep .el-dialog__body {
  height: 75vh;
  // overflow-y: auto;
  // overflow-x: hidden;
  // overflow-y: clip;
}

.detail_header {
  .title {
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
    color: #003e67;
  }

  .header_right {
    position: relative;

    img {
      cursor: pointer;
      width: 38px;
      height: 38px;
    }

    img:nth-child(1) {
      margin-right: 20px;
    }
  }
}

.pdf_box {
  width: 100%;
  height: 100%;
  overflow: auto;
  // height: auto;
  // padding: 15px;
}

.pdf_title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #003e67;
  margin-bottom: 15px;
}

.notes_content {
  margin-top: 15px;
  // margin-left: 35px;
}
</style>
